<template>
	<view class="home">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-10" style="height: 100rpx;">
			<tabbar type="0" @conGinf="conGinf"></tabbar>
			<view class="fff mg-r-30">
				<image src="@/static/add/Language.png" mode="widthFix" style="width: 57.6rpx;" @click="languageChange">
				</image>
			</view>
		</view>

		<u-notice-bar mode="horizontal" :list="[`${i18n.GoLive}`]" bg-color="#1A213E" color="#FFFFFF"
			more-icon></u-notice-bar>

		<!-- 轮播 -->
		<view class="" style="padding:20rpx 20rpx;">
			<u-swiper :list="list[getLang].banner" height="300" border-radius="22"></u-swiper>
		</view>

		<view class="btnBg">
			<view class="bg-item" v-for="item in btnList" :key="item.id">
				<view class="t1">{{i18n[item.name]}}</view>
				<view class="t2">{{item.price}}</view>
			</view>
		</view>
		<view class="text-ri mg-r-20 grayBB7">
			{{i18n.income}}
		</view>

		<view class="userlevel">
			<view class=""></view>
			<view class="fsb">
				<view class="">{{i18n.Teamrewards}}</view>
				<view class="levelBtn" @click="onupgrade">{{i18n.upgrade}}</view>
			</view>
			<view class="flex aic tmpadd-20">
				<image src="@/static/add/home-team.png" style="width: 60rpx;height: 60rpx;"></image>
				<view class="f50 mg-l-20">{{homeData.team_fenhong}}</view>
			</view>
			<view class="tmpadd-40 fsb">
				<view class="flex aic">
					<image src="@/static/add/home-tlogo.png" style="width: 90rpx;height: 90rpx;"></image>
					<view class="f32 mg-l-10">{{i18n.Membershiplevel}}</view>
				</view>
				<view class="f24 mg-t-20">{{homeData.level_name}}</view>
			</view>
		</view>
		<view class="power">
			<view class="power-item" v-for="(item,index) in powerList" :key="item.id"
				@click="pageto('/pages/index/record?type='+index,false,index)">
				<view class="fsb aic">
					<view class="">{{i18n[item.name]}}</view>
					<image :src="item.pic" style="width: 114rpx;height: 46rpx;"></image>
				</view>
				<view class="f42 tmmgin-30">{{item.price}}</view>
				<view class="power-btn mg-t-50">{{i18n[item.btn]}}</view>
			</view>
		</view>

		<image :src="list[getLang].invite" mode="widthFix" class="mg-l-20" style="width: 710rpx;"
			@click="pageto('/pages/invite/index')"></image>

		<image :src="list[getLang].cooperate" mode="widthFix" class="mg-l-20 mg-t-40" style="width: 710rpx;">
		</image>

		<view class="mg-l-20 mg-r-40 mg-t-60 fsb">
			<view class="">
				<image src="@/static/add/home-logo.png" style="width:400rpx;height:60rpx"></image>
			</view>
			<view class="">
				<image src="@/static/add/home-fj.png" class="mg-r-40" style="width: 52rpx;height: 52rpx;"
					@click="getLink()"></image>
				<image src="@/static/add/home-ln.png" class="mg-r-20" style="width: 52rpx;height: 52rpx;"
					@click="getLink(false)"></image>
			</view>
		</view>

		<!-- <view class="text-a fff mg-t-20">{{i18n.contact}}DAO：KeepRising@gmail.com</view> -->

		<view class="he4"></view>

		<!-- 交易密码 -->
		<u-popup v-model="showbtn" mode="center" border-radius="20" :mask-close-able="false"
			:mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}">
			<view class="text-a" style="width: 600rpx;padding: 50rpx;">
				<view class="fff f36">{{i18n.prompt}}</view>
				<view class="mg-t-40 fff" style="">{{i18n.Settransactionpassword}}</view>
				<input class="passInput" type="password" v-model="password" :placeholder="i18n.Entertransactionpassword"
					placeholder-style="color:#999999" />
				<button @tap="login(true)" class="passbtn">{{i18n.confirm}}</button>
			</view>
		</u-popup>

		<u-modal v-model="show" :confirm-text="i18n.confirm" :cancel-text="i18n.cancel" @confirm="confirm"
			:title="i18n.Upgradeprompt" confirm-color="#43B89C" cancel-color="rgba(255,255,255,.6)"
			:content="`${i18n.Upgr}${money}USDT${i18n.Plment}`" show-cancel-button></u-modal>

	</view>
</template>

<script>
	var that
	import tabbar from "../../components/tabbar/tabbar.vue"
	import {
		_updataTabBar,
		pageto,
		fetch,
		showToast
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import Web3 from "web3";
	import abi from "../../common/abi/BSC.js";
	import ouyi from "../../common/abi/ouyi.js";
	let btnList = [{
		id: 0,
		name: "computingpower",
		price: "0"
	}, {
		id: 1,
		name: "DigKR",
		price: "0"
	}, {
		id: 2,
		name: "DividendKR",
		price: "0"
	}]
	let powerList = [{
		id: 0,
		name: "grade",
		pic: '/static/add/home-green.png',
		price: "0",
		btn: 'upgradation'
	}, {
		id: 1,
		name: "Gradedividend",
		pic: '/static/add/home-red.png',
		price: "0",
		btn: 'Record'
	}]
	let homeData = {
		dengjifenhong: 0,
		dengjifenhong_kr: "0.00",
		dengjifenhong_usdt: "0.00",
		dengjisuanli: "0.00",
		level_name: "遊客",
		liudongsuanli: "0.00",
		team_fenhong: 0,
		toal_fenhong: 0,
		total_kuangji: 0
	}
	export default {
		data() {
			return {
				show: false,
				showbtn: false,
				list: [{
					banner: ['/static/add/banner1-tra.png',
						'/static/add/banner2-tra.png',
						'/static/add/banner3-tra.png'
					],
					cooperate: '/static/add/home-cooperate-tra.png',
					invite: '/static/add/home-invite-tra.png'
				}, {
					banner: ['/static/add/banner1-en.png',
						'/static/add/banner2-en.png',
						'/static/add/banner3-en.png'
					],
					cooperate: '/static/add/home-cooperate-en.png',
					invite: '/static/add/home-invite-en.png'
				}],
				btnList,
				powerList,
				homeData,
				walletAddress: '',
				password: '',
				code: '',
				money: -1,
			}
		},
		components: {
			tabbar
		},
		onLoad() {
			that = this

		},
		onShow() {
			setTimeout(function() {
				that.getqianbao()
			}, 100)
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getLangType',
				'getLoginInfo',
				'getUsdt',
				'getKr',
				'getBonus',
				'getIsBlance'
			]),
			getLang() {
				return this.getLangType == "traditional" ? 0 : 1
			}
		},
		methods: {
			...mapMutations([
				'setLoginInfo',
				'setLogin',
				'setLangType',
				'setIsBlance'
			]),

			init() {
				this.getData()
			},

			setlv(val) {
				let isData = this.getIsBlance
				isData.is = val
				this.setIsBlance(isData)
			},

			initialize(val = false) {
				if (val) {
					showToast(val)
				}
				setTimeout(() => {
					this.init()
					uni.hideLoading()
				}, 1500)

				setTimeout(() => {
					this.init()
				}, 5000)
			},

			getLink(type = true) {
				if (type) {
					window.location.href = 'https://t.me/Keep_Rising_KR'
				} else {
					window.location.href = 'https://twitter.com/KeepRising_KR'
				}
			},

			// 获取首页数据
			getData() {
				that.$getAjax('Member/kp_info', '', function(res) {
					const kpData = res.data
					that.homeData = res.data
					that.btnList[0].price = kpData.liudongsuanli
					that.btnList[1].price = kpData.total_kuangji
					that.btnList[2].price = kpData.toal_fenhong
					that.powerList[0].price = kpData.dengjisuanli
					that.powerList[1].price = kpData.dengjifenhong
					that.money = kpData.up_level_usdt
					let user = that.getLoginInfo
					user.name = kpData.level_name
					that.setLoginInfo(user)
					if (!that.getIsBlance || !that.getIsBlance.is || that.getIsBlance.lv != kpData.level_name) {
						that.getBlance()
					}
				})
			},

			getBlance() {
				that.$getAjax('member/usdtvkr', '', function(res) {
					let data = {
						money: res.data,
						is: true,
						lv: that.getLoginInfo.name
					}
					that.setIsBlance(data)
				})
			},

			// 连接钱包,有token
			async getqianbao() {
				if (window.ethereum) {
					let ethereum = window.ethereum
					const accounts = await ethereum.request({
						method: 'eth_requestAccounts'
					});
					that.walletAddress = accounts[0];
					let token = that.getLoginInfo.address
					if (token) {
						if (that.walletAddress == token) {
							that.login()
						} else {
							that.denglu()
							that.setIsBlance(false)
						}
					} else {
						that.denglu()
						that.setIsBlance(false)
					}
				}
			},

			denglu() {
				let $_GET = (function() {
					let url = window.document.location.href.toString();
					let u = url.split("#/?");
					if (typeof(u[1]) == "string") {
						u = u[1].split("&");
						let get = {};
						for (let i in u) {
							let j = u[i].split("=");
							get[j[0]] = j[1];
						}
						return get;
					} else {
						return {};
					}
				})();
				if (JSON.stringify($_GET) != "{}") {
					// console.log($_GET.rid);
					let rid = $_GET.rid.replace("#", "");
					rid = rid.replace("/", "");
					this.code = rid
				}
				this.login()
			},

			login(show = false) {
				that = this
				if (show && !that.password) {
					uni.showToast({
						icon: 'none',
						title: that.i18n.Settransactionpassword,
						duration: 1500
					});
					return
				}
				that.$postAjax('Login/login', {
					address: that.walletAddress,
					code: that.code,
					password: that.password
				}, function(res) {
					if (res.code == 22) {
						that.showbtn = true
						return
					}
					that.showbtn = false
					let user = res.data
					that.setLoginInfo({
						name: user.level_name,
						address: that.walletAddress,
						token: user.token
					})
					that.init()
				})
			},

			languageChange() {
				if (this.getLangType == "english") {
					this.$i18n.locale = "traditional"
					this.setLangType("traditional")
				} else {
					this.$i18n.locale = "english"
					this.setLangType("english")
				}
			},

			onupgrade() {
				if (this.money == -1) return
				this.show = true
			},

			async confirm() {
				if (window.web3) {
					let ethereum = window.ethereum
					// let web3 = new Web3(ethereum);;
					let web3 = new Web3(ethereum);
					let ethContract = new web3.eth.Contract(abi, that.getUsdt)
					let krContract = new web3.eth.Contract(abi, that.getKr)
					const amountU = web3.utils.toWei(that.money + '', "ether")
					// // 获取当前网络的Gas价格
					web3.eth.getGasPrice().then((currentGasPrice) => {
						// 将当前的Gas价格提高20%作为交易的Gas价格
						// const gasPrice = web3.utils.toBN(currentGasPrice).mul(web3.utils.toBN(2)); 
						let gasPriceInWei = Math.floor(currentGasPrice * 1.5)
						ethContract.methods.allowance(that.walletAddress, that.getKr).call()
							.then(allowedAmount => {
								uni.showLoading({
									title: that.i18n.Authorizing,
									mask: true
								})
								if (Number(allowedAmount) < amountU) {
									return ethContract.methods.approve(that.getKr, amountU + '').send({
										from: that.walletAddress,
										gasPrice: gasPriceInWei.toString() // 设置交易的Gas价格
									})
								} else {
									return Promise.resolve()
								}
							})
							.catch(error => {
								that.initialize(error.message)
								return Promise.reject()
							})
							.then(() => {
								that.setlv(false)
								return krContract.methods.userUpgrade(amountU + '').send({
									from: that.walletAddress,
									gasPrice: gasPriceInWei.toString() // 设置交易的Gas价格
								})
							})
							.then(result => {
								that.setlv(true)
								that.initialize(that.i18n.Paymentsuccessful)
								setTimeout(function() {
									that.getData()
								}, 3000)
							})
							.catch(error => {
								that.setlv(true)
								that.initialize(error.message)
							})
					});
				}
			},
			geTel(tel) {
				var reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},
			pageto(url, pp, type) {
				if (type == 0) return
				pageto(url, pp);
			},
		},
		onReachBottom() {

		},
	}
</script>

<style lang="scss" scoped>
	.home {
		background-image: url(@/static/add/home-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	/deep/ uni-swiper {
		background-color: transparent !important;
	}

	.btnBg {
		.bg-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
			overflow: hidden;
			margin: 20rpx;
			padding: 40rpx 50rpx;
			border-radius: 20rpx;
			background: #515F8C;

			&:nth-child(1) {
				margin: 50rpx 20rpx;
				padding: 50rpx 60rpx;
				background: linear-gradient(to right, #24EEBE, #B22CD8);
			}

			&:nth-child(2)::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 110rpx;
				height: 100%;
				background: linear-gradient(to top right, #B22CD8 0%, rgba(77, 50, 120, .2) 50%, #515F8C 60%);
			}

			&:nth-child(2)::after {
				content: "";
				position: absolute;
				left: 8rpx;
				bottom: 8rpx;
				width: 102rpx;
				height: 100%;
				border-radius: 0 0 0 10rpx;
				background: linear-gradient(to top right, #4E3278 0%, #4E3278 10%, rgba(81, 95, 140, .4) 52%);
				z-index: 1;
			}

			&:nth-child(3)::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 110rpx;
				height: 100%;
				background: linear-gradient(to top left, #11E8CE 0%, rgba(17, 232, 206, .2) 40%, #515F8C 60%);
			}

			&:nth-child(3)::after {
				content: "";
				position: absolute;
				right: 8rpx;
				bottom: 8rpx;
				width: 102rpx;
				height: 100%;
				border-radius: 0 0 10rpx 0;
				background: linear-gradient(to top left, #266376 0%, #266076 10%, rgba(81, 95, 140, .4) 70%);
				z-index: 1;
			}

			.t1 {
				position: relative;
				z-index: 2;
			}

			.t2 {
				position: relative;
				z-index: 2;
			}

			.t1::before {
				content: "";
				position: absolute;
				top: 0;
				right: -50rpx;
				width: 6rpx;
				height: 32rpx;
				background: rgba(255, 255, 255, .4);
			}

		}
	}

	.userlevel {
		margin: 20rpx;
		padding: 34rpx;
		color: #FFFFFF;
		background: rgba(81, 95, 140, .5);
		border-radius: 40rpx;
		box-shadow: inset -4rpx -4rpx 6rpx rgba(255, 255, 255, .25);

		.levelBtn {
			padding: 14rpx 40rpx;
			border-radius: 10rpx;
			background-color: #43B89C;
		}
	}

	.power {
		display: flex;
		margin: 4rpx;

		.power-item {
			width: calc(50% - 32rpx);
			margin: 16rpx;
			padding: 40rpx 34rpx;
			color: #FFFFFF;
			background: rgba(81, 95, 140, .5);
			border-radius: 40rpx;
			box-shadow: inset -4rpx -4rpx 6rpx rgba(255, 255, 255, .25);

			.power-btn {
				width: 180rpx;
				padding: 16rpx 0;
				text-align: center;
				border-radius: 10rpx;
			}

			&:nth-child(1) .power-btn {
				background-color: #43B89C;
			}

			&:nth-child(2) .power-btn {
				color: #43B89C;
				background-color: #FFFFFF;
			}
		}
	}

	/deep/ .u-model {
		background-color: transparent !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(193, 209, 255, 0.4) !important;
		box-shadow: inset -4rpx -4rpx 8rpx rgba(255, 255, 255, .25);
	}

	/deep/ .u-model__title {
		color: #FFFFFF;
	}

	/deep/ .u-model__content__message {
		color: #FFFFFF;
	}

	/deep/ .u-model__footer__button:nth-child(1) {
		border-right: 2rpx solid rgba(255, 255, 255, .40);
	}

	.passInput {
		height: 100rpx;
		color: #999999;
		margin-top: 40rpx;
		padding-left: 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		text-align: left;
	}

	.passbtn {
		margin-top: 30rpx;
		color: #fff;
		background-color: #43B89C;
	}
</style>